<template>
  <div>
    <van-row class="u-header">
      <van-col span="1" offset="1">
        <van-icon name="arrow-left" />
      </van-col>
      <van-col span="18">
        <span>账户信息</span>
      </van-col>
      <van-col span="4">
        <van-popover
          v-model="showPopover"
          trigger="click"
          :actions="actions"
          theme="dark"
          placement="bottom-end"
        >
          <template #reference>
            <van-icon name="ellipsis" />
          </template>
        </van-popover>
      </van-col>
    </van-row>
    <van-form>
      <van-field name="uploader" label="头像上传">
        <template #input>
          <van-uploader v-model="uploader" />
        </template>
      </van-field>
      <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        readonly
        clickable
        name="calendar"
        :value="value"
        label="出生日期"
        placeholder="点击选择日期"
        @click="showCalendar = true"
      />
      <van-calendar v-model="showCalendar" @confirm="onConfirm" />
      <van-dropdown-menu class="u-menu" lable="性别">
        <van-dropdown-item v-model="value1" :options="option1" class="v-item" />
      </van-dropdown-menu>
      <van-field
        v-model="username"
        name="邮箱"
        label="邮箱"
        placeholder="请输入邮箱"
        :rules="[{ required: true, message: '请填写用户效率' }]"
      />
        <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit" class="v-btn">确认修改</van-button>
  </div>
    </van-form>
  </div>
</template>

<script>
import {
  Icon,
  Col,
  Row,
  Popover,
  Button,
  Form,
  Field,
  Uploader,
  Calendar,
  DropdownMenu,
  DropdownItem,
} from "vant";
export default {
  data() {
    return {
      value1: 0,

      option1: [
        { text: "男", value: 0 },
        { text: "女", value: 1 },
      ],
      value: "",
      showCalendar: false,
      username: "",
      uploader: [],
      showPopover: false,
      actions: [
        { text: "首页", icon: "wap-home-o" },
        { text: "分类", icon: "qr" },
        { text: "购物车", icon: "shopping-cart-o" },
        { text: "会员中心", icon: "friends-o" },
      ],
    };
  },
  components: {
    [Icon.name]: Icon,
    [Col.name]: Col,
    [Row.name]: Row,
    [Popover.name]: Popover,
    [Button.name]: Button,
    [Field.name]: Field,
    [Form.name]: Form,
    [Uploader.name]: Uploader,
    [Calendar.name]: Calendar,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
  },
  methods: {
    onConfirm(date) {
      this.value = `${date.getFullYear()}/${
        date.getMonth() + 1
      }/${date.getDate()}`;
      this.showCalendar = false;
    },
  },
};
</script>

<style scoped>
.u-header {
  text-align: center;
  height: 3rem;
  color: black;
  line-height: 3rem;
  font-size: 1.1rem;
  background: #f5f5f5;
}
.u-menu {
  background: springgreen;
}
.v-item {
  width: 70%;
  margin-left: 5rem;
  background: steelblue;
}
.v-btn{
    border-radius: .15rem;
     font-size: .8rem;
     display: block;
     padding: 1rem;
}
</style>